<template>
  <div class="index">
    <index>
      <div class="top box utils-relative-zIndex" slot="top">
        <cancel panel="cameraPanel"></cancel>
        <table border="1">
          <tr>
            <th colspan="2">设备参数一览</th>
          </tr>
          <tr>
            <td>生产商</td>
            <td>海尔兄弟公司</td>
          </tr>
          <tr>
            <td>设备型号</td>
            <td>多功能落地空调</td>
          </tr>
          <tr>
            <td>使用情况</td>
            <td>良好</td>
          </tr>
          <tr>
            <td>状态</td>
            <td>正常</td>
          </tr>
          <tr>
            <td>位置</td>
            <td>火炬小学</td>
          </tr>
        </table>
      </div>
      <div class="bottom box utils-relative-zIndex" slot="middle">
        <div class="show">
          <div class="model utils-flex-Justbetween utils-flex-Aligncenter">
            <div class="mode">
              <i class="icon" v-for="(item,index) in modelData" :key="index" :class="[item.icon,{active: airInfo.Mode === item.value && airInfo.Power === 1}]"></i>
            </div>
            <div class="power" :class="airInfo.Power === 1 ? 'utilsPowerUp':'utilsPowerDown'"></div>
          </div>
          <div class="contrl utils-flex-Justbetween utils-flex-Aligncenter" v-if="!!airInfo">
            <div class="wen box_"><span>{{airInfo.Temperatur}}</span> ℃</div>
            <div class="panelShow box_">
              <div class="utils-flex" style="width: 100%;height: 70%;">
                <i class="icon_" :class="mode[airInfo.Mode]"></i>
                <div class="time"><span>15:11</span></div>
              </div>
              <div class="day" style="height: 30%;">2021/12/25</div>
            </div>
          </div>
        </div>
        <div class="btns utils-flex-Justbetween utils-flex-Aligncenter">
          <div class="btn utils-flex-Justcenter utils-flex-Aligncenter">
            <i class="iconfont icon-kaiguan icon" @click="setAirStatus('switch')"></i>
          </div>
          <div class="btn utils-flex-Justcenter utils-flex-Aligncenter">
            <i class="iconfont icon-moshi icon" @click="setAirStatus('model')"></i>
          </div>
          <div class="btn utils-flex-Justcenter utils-flex-Aligncenter">
            <i class="iconfont icon-xiangshang icon" @click="setAirStatus('up')"></i>
          </div>
          <div class="btn utils-flex-Justcenter utils-flex-Aligncenter">
            <i class="iconfont icon-xiangxia icon" @click="setAirStatus('down')"></i>
          </div>
        </div>
      </div>
    </index>
  </div>
</template>

<script>
  import iconFont from "@/components/utils/iconFont.vue"
  import index from "../index.vue"
  var time;
  export default {
    components: {
      index,
      iconFont
    },
    data() {
      return {
        airInfo: {},
        initTime: null,
        modelData: [{
            "value": 1,
            "label": "制冷",
            "icon": "iconfont icon-snow"
          },
          {
            "value": 2,
            "label": "除湿",
            "icon": "iconfont icon-chushi"
          },
          {
            "value": 3,
            "label": "送风",
            "icon": "iconfont icon-songfeng1"
          },
          {
            "value": 4,
            "label": "制热",
            "icon": "iconfont icon-jiare-"
          }
        ],
        mode: {
          1: "iconfont icon-snow",
          2: "iconfont icon-chushi",
          3: "iconfont icon-songfeng1",
          4: "iconfont icon-jiare-"
        }
      }
    },
    created() {
      this.initMqtt()
      this.getInit()
      this.initTime = setInterval(() => {
        this.getInit()
      }, 3000)
    },
    destroyed() {
      if (this.initTime) {
        clearInterval(this.initTime)
      }
    },
    methods: {
      initMqtt() {
        this.client_mixin.on('message', (top, message) => {
          if(top === 'test/panel_detail') {
            var item = JSON.parse(message.toString());
            console.log(item,item.target);
            item.target === "conditionerPanel" && this.setAirStatus(item.value)
            this.client_mixin.publish(`status`, JSON.stringify({ status: '1' }));
          }
        });
      },
      checkPanel(panel) {
        console.log(panel)
        return
        this.$store.commit('changePanel', panel)
      },
      async getInit(action) {
        const { data: res } = await this.$http.get('a18J9whiM6i', {
          params: {
            action: 'QueryDevicePropertyStatus',
            deviceName: 'test'
          }
        })
        console.log(res);
        res.code !== 1 && this.$message.error(res.msg)
        let resAciton = res.result.filter((item) => {
          return item.Identifier === "Airconditioning"
        })
        if (action) {
          return Promise.resolve(JSON.parse(resAciton[0].Value))
        } else {
          this.airInfo = JSON.parse(resAciton[0].Value)
        }
      },
      async setAirStatus(type) {
        const air = await this.getInit(true)
        const status = Object.keys(air).every((item) => {
          return air[item] = this.airInfo[item]
        })
        if (air.Power === 0 && type !== "switch") {
          this.$message.error("设备未开启")
          return
        }
        switch (type) {
          case "switch":
            this.airInfo.Power = this.airInfo.Power === 1 ? 0 : 1
            break
          case "model":
            if (this.airInfo.Mode === 4) {
              this.airInfo.Mode = 1
            } else {
              this.airInfo.Mode++
            }
            break
          case "up":
            this.airInfo.Temperatur < 30 && this.airInfo.Temperatur++
            break
          case "down":
            this.airInfo.Temperatur > 16 && this.airInfo.Temperatur--
            break
        }
        // if(status) {
        if (time) {
          clearTimeout(time)
          time = setTimeout(() => {
            this.formVrvSwitchChange(this.airInfo)
          }, 500)
        } else {
          time = setTimeout(() => {
            this.formVrvSwitchChange(this.airInfo)
          }, 500)
        }
        // }
        console.log(this.airInfo, air, status);

      },
      async formVrvSwitchChange(formData) {
        var data = {}
        var that = this
        data = { Airconditioning: formData }

        const { data: res } = await that.$http.put('a18J9whiM6i', null, {
          params: {
            deviceName: 'test',
            items: data
          }
        })

        if (!res) return that.$message.error('连接出错！')
        if (res.code !== 1) return that.$message.error(res.msg)
        that.$message.success('修改成功')
        var count = 0
        const timer = setInterval(async () => {
          const { data: res } = await that.$http.get('a18J9whiM6i', {
            params: {
              action: 'QueryDevicePropertyStatus',
              deviceName: 'test'
            }
          })
          if (res.code === 1) {
            res.result.forEach((item1) => {
              if (item1.Identifier === 'Airconditioning') {
                var r = 0
                for (var key in data.Airconditioning) {
                  if (JSON.parse(item1.Value)[key] === data.Airconditioning[key]) {
                    r += 1
                  }
                }
                if (r === 8) {
                  // that.$message.success('更新状态成功')
                  clearInterval(timer)
                }
              }
            })
          }
          count += 1
          if (count > 15) {
            that.$message.success('更新超时，当前状态请以实际为准，或手动刷新')
            clearInterval(timer)
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="less" scoped>
  @textColor: #25b3d6;

  .active {
    box-shadow: 0 0 5px white;
  }

  .index {
    height: 100%;

    .box {
      height: 100%;
      width: 100%;
      // border: 1px dashed blue;
    }

    .top {
      box-sizing: border-box;
      padding: 0 15px;
      overflow: auto;

      >table {
        margin-top: 5px;
        width: 100%;
        border-collapse: collapse;
        color: white;
        border: 1px solid white;

        td:first-child {
          width: 26%;
          text-align: center;
        }

        td:last-child {
          text-align: center;
        }
      }
    }

    .bottom {
      .show {
        height: 65%;

        // border: 1px solid blue;
        .model {
          height: 25%;
          padding-right: 10px;
        }

        .contrl {
          height: 75%;
          width: ;
          box-sizing: border-box;
          padding: 5px 10px;

          >.wen {
            width: 50%;
            text-align: center;
            font-size: 30px;
            color: #2cd2ff;
            font-weight: 550;

            span {
              font-size: 85px;
            }
          }

          >.panelShow {
            width: 50%;
            height: 100%;

            >.day {
              color: @textColor;
              font-size: 20px;
              text-align: right;
              font-weight: 550;
            }
          }

          .time {
            width: 50%;
            position: relative;

            span {
              position: absolute;
              bottom: 10px;
              right: 5px;
              color: @textColor;
              font-size: 22px;
              text-align: right;
              font-weight: 550;
            }
          }

          .icon_ {
            font-size: 80px;
            color: #26b9dd;
            position: relative;
            top: -20px;

          }
        }

        .icon {
          font-size: 25px;
          color: #0086B3;
          margin: 5px 5px;
          // cursor: pointer;
        }
      }

      .btns {
        height: 35%;
        // border: 1px solid blue;

        >.btn {
          width: 25%;
          height: 70%;

          &:not(:last-child) {
            border-right: 1px solid #26b9e1;
          }

          >.icon {
            font-size: 40px;
            color: #26b9e1;
            cursor: pointer;

            &:hover {
              color: #2cd2ff;
            }
          }
        }
      }
    }
  }
</style>
